<template>
    <div class="layout-wrapper" :class="classPrefix && `${classPrefix}-wrapper`" ref="tallyPage">
        <div class="content" :class="classPrefix && `${classPrefix}-content`">
            <slot/>
        </div>
        <Nav class="nav-bar" />
    </div>
</template>

<script lang="ts">
    import Vue from 'vue';
    import {Component, Prop} from 'vue-property-decorator';

    @Component
    export default class Layout extends Vue {
        name = 'Layout';

        @Prop(String) classPrefix: string | undefined;

        mounted() {
            window.addEventListener('resize', () => {
                const vh = window.innerHeight * 0.01;
                // Then we set the value in the --vh custom property to the root of the document
                document.documentElement.style.setProperty('--vh', `${vh}px`);
            })
        }
    }
</script>

<style lang="scss" scoped>
    .layout-wrapper {
        display: flex;
        flex-direction: column;
        height: 100vh;
        height: calc(var(--vh, 1vh) * 100);
    }

    .content {
        flex-grow: 1;
        overflow: auto;
    }

    .nav-bar {
        flex-shrink: 0;
    }

</style>